<template>
  <div class="header-container">
    <!-- 左侧 Logo 和导航 -->
    <div class="left-section">
      <!-- <div class="logo"><img src="/src/assets/emoji.svg" alt="logo" style="width: 30px; ">共享社区</div> -->
      <div class="logo">
        <img
          src="/src/assets/logo.jpg"
          alt="logo"
          style="width: 35px; vertical-align: middle"
        />
        <span style="vertical-align: middle">CodeSpace</span>
      </div>
      <el-menu mode="horizontal" :ellipsis="false">
        <el-menu-item index="1" @click="toHome">
          <el-icon><House /></el-icon>
          首页
        </el-menu-item>
        <el-menu-item index="2">

          
        Java</el-menu-item>
        <el-menu-item index="3">Python</el-menu-item>
        <el-menu-item index="4">前端</el-menu-item>
        <el-menu-item index="5">了解社区</el-menu-item>
      </el-menu>
    </div>
    <!-- 右侧搜索和操作按钮 -->
    <div class="right-section" >
      <el-input placeholder="搜索社区内容" class="search-input">
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
      <el-button link>
      <el-icon><BellFilled /></el-icon>
      消息
      </el-button>
      <RouterLink to="/layout/articlePublish" v-if="isLogin">
        <el-button color="#FFC0CB" ><span class="soul-create">灵魂创作</span>
          <el-icon class="el-icon--right"><Edit /></el-icon>
        </el-button>
      </RouterLink>
      <el-button link>交流室</el-button>
      <el-button type="primary" link @click="showLoginModal()" v-if="!isLogin">登录</el-button>
      <div v-if="isLogin" >
        <el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
          <!-- 触发元素 - Avatar 头像 -->
          <span class="avatar-dropdown">
            <el-avatar :size="40" :src="userAvatar" class="avatar-trigger">
              <!-- 头像加载失败时的备用内容 -->
              <span v-if="!userAvatar">{{ userName }}</span>
            </el-avatar>
          </span>

          <!-- 下拉菜单模板 -->
          <template #dropdown>
            <el-dropdown-menu class="avatar-menu">
              <el-dropdown-item class="user-info">
                <div class="user-name">用户名:{{ userName }}</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div class="user-email">邮箱:{{ userEmail }}</div>
              </el-dropdown-item>
              <el-dropdown-item divided command="profile">
                <i class="el-icon-user"></i> 个人中心
              </el-dropdown-item>
              <el-dropdown-item command="settings">
                <i class="el-icon-setting"></i> 我的主页
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <i class="el-icon-switch-button"></i> 退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
        </div>
  </div>
</template>
<script setup>
import { Edit } from "@element-plus/icons-vue";
import { Search,House,BellFilled } from "@element-plus/icons-vue";
import router from "@/router";
import { onMounted, watch,defineProps } from "vue";
import { ref, computed } from "vue";

import request from "@/components/utiles/request.js";

import  useUserIdStore  from "@/stores/useUserId.js";
import { useAuthStore } from "@/stores/authStore";
      // 跨组件传递数据
const authStore = useAuthStore();
 const userStore = useUserIdStore();
const userName = ref("");
const userEmail = ref("");
const userAvatar = ref("");
const isLogin = ref(false);
function showLoginModal() {
  router.push("/userLogin");
}
function toHome() {
  router.push("/layout/articleHome");
}

watch(() => {
  if (typeof window === "undefined") {
    return isLogin;
  }
  // 检查 localStorage 中是否存在 "authorization"
  isLogin.value =
    !!authStore.token &&
    authStore.token !== "undefined";
  return isLogin;
});

onMounted(async() => {
 getdata();
})
watch(
  () => authStore.token,
  (newToken) => {
    if (newToken) {
      getdata();
    } else {
      isLogin.value = false;
      userName.value = "";
      userEmail.value = "";
      userAvatar.value = "";
    }
  }
);
const getdata = async()=>{
 const token = authStore.token;
  if(token){
    const res = await request.get(`/userInfo/selectUserInfo?token=${token}`)
    console.log(res.data);
    if(res.data.code === 200){

      userStore.setUserId(res.data.data.userId);
      userName.value = res.data.data.authorName;
      userEmail.value = res.data.data.email;
      userAvatar.value = res.data.data.avatar;
      isLogin.value = true;
    }else{
      authStore.setToken(null);
      isLogin.value = false;
    }
    }
}
// 处理菜单命令
const handleCommand = (command) => {
  switch (command) {
    case "logout":
      handleLogout();
      break;
    case "profile":
      navigateToProfile();
      break;
    case "settings":
      openSettings();
      break;
  }
};

// 操作方法
const handleLogout = () => {
  // 执行登出操作
  // localStorage.removeItem("authorization");
  authStore.setToken(null);
  // 刷新页面
  isLogin.value = false;  
};

const navigateToProfile = () => {
  console.log("跳转到个人中心");
  router.push("/user/userInfoDetaile");
};

const openSettings = () => {
  router.push("/userCenter");
};


</script>
<style>
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #fff; /* 阿里云主题色可改为 #001529 */
  border-bottom: 1px solid #eee;
  z-index: 1000; /* 确保导航栏在其他元素之上 */
  height: 60px; /* 设置固定高度 */
}

.left-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* .logo {
  font-size: 18px;
  font-weight: bold;
  color: #333;
} */
.logo {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: inline-flex;
  align-items: center; /* 垂直居中 */
  gap: 5px; /* 图标和文本之间的间距 */
}

.el-menu {
  border-bottom: none;
}

.el-menu--horizontal .el-menu-item {
  font-size: 14px;
  color: #666;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  width: 200px;
  margin-right: 10px;
}
/*  头像样式 */
.avatar-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.3s;
}

.avatar-dropdown:hover {
  opacity: 0.8;
}

.avatar-trigger {
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 下拉菜单样式 */
:deep(.avatar-menu) {
  min-width: 200px;
  padding: 8px 0;

  .user-info {
    cursor: default;
    padding: 12px 16px;

    .user-name {
      font-weight: 600;
      color: #303133;
    }

    .user-email {
      font-size: 12px;
      color: #909399;
    }
  }

  .el-dropdown-menu__item {
    display: flex;
    align-items: center;
    font-size: 14px;

    i {
      margin-right: 8px;
      font-size: 16px;
    }
  }
}
.soul-create {
  font-size: 14px;
  color: #fff;
}
</style>
